<template>
    <div>     
      <el-table :data="tableData" stripe style="width: 100%" >
        <el-table-column prop="title" label="标题"  width="100" />
          <el-table-column prop="detail" label="详情" width="200" />
          <el-table-column prop="amount" label="价格" width="200" />
          <el-table-column prop="stock" label="库存" width="200" />
          <el-table-column prop="action" label="操作" width="400">
            <template v-slot="scope" >
              <el-button type="primary" :icon="Edit" @click="addCart(scope.row.id)" >加入购物车</el-button>
              <el-button type="primary" @click="seeCart()" >查看购物车</el-button>
             </template>
        </el-table-column>
      </el-table>
    </div>
  </template>
  
  <script setup>
  import { ref, reactive, computed } from "vue"
  import requestUtil from "@/util/request"
  import { ElMessage, ElMessageBox } from 'element-plus'
  import { useRouter } from 'vue-router'
  
  
  const tableData=ref({})
  const queryForm=ref({
    query:'',
    pageNum:1,
    pageSize:10
  })
  const form = ref({
   productId:"",
   buyNum:1,

 })
const router = useRouter()
const addCart = (id) =>{
  console.log("id: "+ id)
  form.value.productId = id;
   requestUtil.post("product/sys/cart/add",form.value).then((res) => {
     if(res.data.code == 200){
        router.push("/")
     }
  })
  
}
const seeCart = ()=> {
  router.push("/shop/cart")
}
  
  
  const initShopList=async()=>{
    const res=await requestUtil.post("product/sys/product/list",queryForm.value);
    tableData.value=res.data.productList;

  }
  initShopList()
  
  </script>